﻿@using xConnected.Common.CompanyProfile
@using xConnected.Common.ExpertProfile
@using xConnected.Common.Project
<div data-bind="with: position">
    <div data-bind="with: workingPosition">
        <div class="alert alert-info">
            <div align="center">@ProjectRes.ClickPartsProject <a href="#" class="btn btn-info" data-bind="click: function() { $root.position.SaveOrUpdate(); }">@CompanyProfile.DoneEditing</a></div>
        </div>
        <div class="alert alert-error" data-bind="visible: $root.position.alertVisible ">
            <div align="center">Please fill out the mandatory fields bellow</div>
        </div>
        <div class="well">
            <div class="row-fluid">
                <a class="span3" data-toggle="modal" href="#PhotoPositionDialog"><img class="img-rounded" data-bind="attr: {src: $data.Photo150X150()}, click:function() { $root.position.dropPhoto(); }" alt="ProfilePhoto"></a>
                <a data-toggle="modal" href="#TitlePositionDialog1" data-bind="click: function(){$root.position.selectTitle(); }">
                    <span class="span4" data-bind="visible: $root.position.nameVisible"><strong>@ProjectRes.Title *</strong></span>
                    <span style="font-size: large; font-weight: bold" id="TitleProjectDialog" data-bind="text: Title" class="span6"></span>
                </a>
                <a data-toggle="modal" href="#DescriptionPositionDialog" data-bind="click: function(){$root.position.selectDescription(); }">
                    <span class="span4" data-bind="visible: $root.position.descriptionVisible"><strong>@ProjectRes.Description *</strong></span>
                    <span data-bind="html: Description" class="span6"></span>
                </a>
            </div>
        </div>
        <span style="font-size: smaller">Fields marked with * are mandatory</span>
        <hr />
        <a class="row-fluid" href="#" data-bind="click: function() { $root.position.selectCountry(); }">
            <span class="span4">
                <strong>@Resources.Country *</strong>
                <i class="icon-info-sign" data-bind="popover: {title: 'Pay attention!', content: 'You need to select first Country, so you can than select Location.', placement: 'right', trigger: 'hover', delay{show: 500, hide: 100}"></i>
            </span>
            <span class="span6" data-bind="with:Country"><span data-bind="text:Description"></span></span>
        </a>
        <a class="row-fluid" data-toggle="modal" href="#LocationPositionDialog" data-bind="visible: $root.position.locationVisible, click: function() { $root.position.selectLocation(); }">
            <span class="span4"><strong>@ProjectRes.Location *</strong></span>
            <span data-bind="text: Location" class="span6"/>
        </a>
    </div>
</div>
<div data-bind="visible: $root.position.locationMapVisible" style="height: 150px; width: 250px; margin-bottom: 10px; margin-left: 298px" id="locationPositionEditMode"></div>
<div data-bind="with: position">
    <div data-bind="with: workingPosition">
        <a class="row-fluid" data-toggle="modal" href="#StartDatePositionDialog" data-bind="click: function() { $root.position.selectStartDate(); }">
            <span class="span4"><strong>@ProjectRes.StartDate *</strong></span>
            <span data-bind="text: StartDate" class="span6"/>
        </a>
        <a class="row-fluid" data-toggle="modal" href="#DurationPositionDialog" data-bind="click: function() { $root.position.selectDuration(); }">
            <span class="span4"><strong>@ProjectRes.Duration *</strong></span>
            <span data-bind="text: Duration" class="span6"/>
        </a>
                
        <a class="row-fluid" data-toggle="modal" href="#JobTypePositionDialog" data-bind="click: function() { $root.position.selectJobType(); }">
            <span class="span4"><strong>Job Types *</strong></span>
            <div class="span6" data-bind="foreach: $root.position.jobTypes" class="btn-toolbar">
                <button class="btn btn-mini"><span data-bind="text: Description"></span></button>
            </div>
        </a>
        <a class="row-fluid" href="#" data-bind="click: function(){$root.position.selectIndustry(); }">
            <span class="span4">
                <strong>Industry *</strong>
                <i class="icon-info-sign" data-bind="popover: {title: 'Pay attention!', content: 'You need to select first Industry, so you can than select Categories and/or Technologies.', placement: 'right', trigger: 'hover', delay{show: 500, hide: 100}"></i>
            </span>
            <span class="span6" data-bind="with: Industry"><span data-bind="text: Description"></span></span>
        </a>
        <a class="row-fluid" data-toggle="modal" href="#CategoriesPositionDialog" data-bind="visible: $root.position.categoriesTechnologiesVisible, click: function() { $root.position.selectCategories(); }">
            <span><strong class="span4">@Resources.Categories</strong></span>
            <span data-bind="foreach: Categories"class="btn-toolbar">
                <span style="margin-left: 20px" class="btn-group" ><button class="btn btn-mini" data-bind=" text: Description"></button></span>
            </span>
        </a>
        <a class="row-fluid" data-bind="visible: $root.position.categoriesTechnologiesVisible, click: function() { $root.position.selectTechnologies(); }" data-toggle="modal" href="#TechnologiesPositionwith: workingPositionBufferDialog">
            <span><strong class="span4">@ProjectRes.Technologies</strong></span>
            <span data-bind="foreach: Technologies"class="btn-toolbar">
                <span style="margin-left: 20px" class="btn-group"><button class="btn btn-mini" data-bind=" text: Name"></button></span>
            </span>
        </a>
    </div>
</div>
<hr/>
<div class="alert alert-info">
    <div align="center"><a href="#" class="btn btn-info" data-bind="click: function() { $root.position.SaveOrUpdate(); }">@CompanyProfile.DoneEditing</a></div>
</div>

<div data-bind="with: position">
    @Html.Partial("MyAccount/Partial/MyPositions/EditMode/Categories")
    @Html.Partial("MyAccount/Partial/MyPositions/EditMode/Title")
    @Html.Partial("MyAccount/Partial/MyPositions/EditMode/Description")
    @Html.Partial("MyAccount/Partial/MyPositions/EditMode/StartDate")
    @Html.Partial("MyAccount/Partial/MyPositions/EditMode/Duration")
    @Html.Partial("MyAccount/Partial/MyPositions/EditMode/JobType")
    @Html.Partial("MyAccount/Partial/MyPositions/EditMode/Country")
    @Html.Partial("MyAccount/Partial/MyPositions/EditMode/CountryUpdate")
    @Html.Partial("MyAccount/Partial/MyPositions/EditMode/Industry")
    @Html.Partial("MyAccount/Partial/MyPositions/EditMode/IndustryUpdate")
</div>
@Html.Partial("MyAccount/Partial/MyPositions/EditMode/Location")
@Html.Partial("MyAccount/Partial/MyPositions/EditMode/Technologies")
@Html.Partial("MyAccount/Partial/MyPositions/EditMode/Photo")